<template>
    <h1>我是 APP 组件</h1>

    <button @click="myId = 'MyCom'">首页</button>
    <button @click="myId = 'MyCom2'">分类</button>
    <button @click="myId = 'MyCom3'">购物车</button>
    <button @click="myId = 'MyCom4'">个人页</button>

    <!-- <MyCom  v-if="myId === 'MyCom'" />
    <MyCom2 v-if="myId === 'MyCom2'" />
    <MyCom3 v-if="myId === 'MyCom3'" />
    <MyCom4 v-if="myId === 'MyCom4'" /> -->

    <!-- <component is="MyCom"></component> -->
    <!-- <component is="MyCom2"></component> -->
    <!-- <component is="MyCom3"></component> -->
    <!-- <component is="MyCom4"></component> -->

    <component :is="myId"></component>

</template>

<script>
import MyCom from "./components/my_com.vue";
import MyCom2 from "./components/my_com2.vue";
import MyCom3 from "./components/my_com3.vue";
import MyCom4 from "./components/my_com4.vue";
export default {
    data() {
        return {
            myId: "MyCom",
        };
    },
    components: {
        MyCom,
        MyCom2,
        MyCom3,
        MyCom4,
    },
};
</script>

<style scoped></style>
